<template>
	<view class="zuipageWrap">
		<form @submit="formSubmit" @reset="formReset" class="zuiForm">
			<view class="uni-flex uni-row">
				<view class="text des">计划方案：</view>
				<view class="text inputwrap zimpo" style="flex: 1;">				
					<input name="pandianname" placeholder="请输入计划方案名称" v-model="pandianname" class="inputwrap" :focus="triggerFocus1"/>
				</view>
			</view>
			
			<view class="uni-flex uni-row">
				<view class="text des">日期：</view>
				<view class="text inputwrap zimpo" style="flex: 1;">
					<picker class="zpicker" mode="date" :value="curdate" :start="mindate" @change="bindDateChange">
						<view class="uni-input zinput">{{curdate}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="text des">库房：</view>
				<view class="text inputwrap zimpo" style="flex: 1;" v-if="supplierList.length">
					<picker class="zpicker" @change="bindPickerChangeD" :value="supplierIndex" :range="supplierList" range-key="name">
						<view class="uni-input zinput">{{supplierList[supplierIndex].name}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-btn-v uni-common-mt">
				<button class="btn-submit J_subBtn" formType="submit" type="primary">提交</button>
			</view>
		</form>
	</view>
</template>
<script>

import {zInventoryplanSave, zDrugStorageList} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'
export default {
	components: {
	},
	data() {
		return {
			supplierIndex: 0,
			supplierList: [],
			mindate: '',
			maxdate: '',
			curdate: '',
			pandianname:'' ,
			triggerFocus1: true
		}
	},
	computed: {
		...mapState(['w_planId'])
	},
	onLoad() {
		this.initDate();
		this.fetchAllData();
	},
	methods: {
		initDate () {
			let curDate = new Date(),
				cdate = this.zutil.getCurDate(curDate),
				_m = ((curDate.getMonth()+1)<10) ? ("0"+(curDate.getMonth()+1)) : (curDate.getMonth()+1),
				firstdate = curDate.getFullYear() + "-"+ _m + "-01";
				
			this.mindate = '1949-01-01';
			this.maxdate = cdate;
			this.curdate = cdate;
		},
		async fetchAllData () {
			let res = await zDrugStorageList();
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				this.supplierList = this.supplierList.concat(res.data);
			}else{
				this.zutil.ztip(res.description || "获取药库列表失败！");
			}
		},
		formSubmit: function (e) {
			this.addPlan();
		},
		async addPlan () {
			let tpl_param = {
				date: this.curdate,
				drugStorage: this.supplierList[this.supplierIndex].id,
				pandianname: this.pandianname,
			}
			if(!this.pandianname){
				this.zutil.ztip("请输入计划方案名称");
				return false;
			}
			this.triggerFocus1 = false;
			uni.hideKeyboard();
			let res = await zInventoryplanSave(tpl_param);
			res = this.zutil.formatAxiosData(res);
			let _that = this;
			if(res.status == '0'){
				uni.showModal({
					title: "院内物流",
					content: "新增盘点计划成功",
					confirmText: "继续新增",
					cancelText: "前往盘点",
					success: function(cres) {
						if (cres.cancel) {
							uni.setStorageSync('planId', res.data.planId);
							uni.redirectTo({
								url: '/pages/inventory/index'
							});
						}else{
							_that.pandianname = '';
							_that.triggerFocus1 = true;
						}
					}
				})
			}else{
				this.zutil.zalert(res.description || "新增盘点计划失败！");
				this.zutil.zuiShaker();
			}
		},
		formReset: function (e) {
			
		},
		bindDateChange: function(e) {
			this.curdate = e.target.value;
		},
		bindPickerChangeD: function(e) {
			this.supplierIndex = e.target.value;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	height: 100%;
	background: #F5F5F5;
	.zuiForm {
		$zuiForm_height: 90upx;
		.uni-row {
			background: #fff;
			padding: 8upx 0;
			border-bottom: 2upx solid #F6F6F6;
			.zpicker {
				display: block;
				width: 100%;
				height: $zuiForm_height;
				line-height: $zuiForm_height;
			}
			.des {
				width: 200upx;
				line-height: $zuiForm_height;
				padding-left: 30upx;
				position: relative;
				.zrequire {
					color: #ff0000;
					display: inline-block;
					position: absolute;
					left: 8upx;
					top: 4upx;
					font-style: normal;
				}
			}
			.inputwrap {
				padding-right: 40upx;
				color: #6b6b6b;
				display: flex;
				align-items: center;
				.uni-input {
					padding: 0;
					color: #6b6b6b;
					height: $zuiForm_height;
					line-height: $zuiForm_height;
				}
				.text {
					height: $zuiForm_height;
					line-height: $zuiForm_height;
					.cdes {
						padding-left: 26upx;
					}
				}
				.cdes {
					height: $zuiForm_height;
					line-height: $zuiForm_height;
				}
			}
		}
		.uni-common-mt {
			padding: 10upx 40upx;
		}
		.uni-title {
			padding-left: 30upx;
		}
		.uni-textarea {
			position: relative;
			uni-textarea {
				max-height: 500upx;
				text-indent: 18upx;
			}
			.textareaDes {
				position: absolute;
				right: 30upx;
				top: -68upx;
				font-size: 24upx;
				span {
					font-style: italic;
					font-size: 34upx;
					margin: 0 12upx 0 6upx;
				}
			}
		}
	}
}
</style>
